<template>
  <view class="container">
	<view class="flex padding" style="padding-top: 30upx;">
		<image src="/src/static/logo.png" mode="" class="cu-avatar round  margin-top-xl "></image>
		<view class="text-grey text-lg margin-top-xl margin-left" style="margin-top: 66upx;">
			{{formattedTime}}
		</view>
	</view>
	<!-- 心理咨询板块 -->
	<view class="flex justify-center">
		<view class="cart padding flex justify-between">
			<view class="">
				<view class="text-white text-xl">心理成长实时咨询</view>
				<view class="flex justify-between margin-top">
					<view class="padding-top-sm" style="color: #f9f9f9;">
						
						<view class="">支持性的对话</view>
						<view class="">围绕最关键的问题</view>
						<view class="">获得应对问题的力量</view>
						<button type="default" class="cu-btn round bg-gradual-pink margin-top-sm">立即进入</button>
					</view>
				</view>
			</view>
			<image src="/src/static/zr/heart1.svg" mode="" ></image>
		</view>
	</view>
	
	<!-- 心理测评 -->
	<swiper class="padding-top swiper-all"
		style="padding-left: 20upx;padding-right: 20upx;"
		:indicator-dots="false" 
		:autoplay="true" 
		:interval="3000" 
		:duration="500"
		:circular="true"
		>
		<swiper-item>
			<view class="swiper-item text1 padding flex justify-between">
				<view class="">
					<view class="text-white text-xl">心理测评</view>
					<view class="flex justify-between margin-top">
						<view class="" style="color: #f9f9f9;">
							
							<view class="">100+心理测试为你定位问题，</view>
							<view class="">了解自己</view>
						</view>
					</view>
				</view>
				<image src="/src/static/zr/text.svg" mode="" ></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class=" swiper-item text2 padding flex justify-between">
				<view class="">
					<view class="text-white text-xl">专业华人心理测评</view>
					<view class="flex justify-between margin-top">
						<view class="" style="color: #f9f9f9;">
							
							<view class="">100+心理测试为你定位问题，</view>
							<view class="">了解自己</view>
						</view>
					</view>
				</view>
				<image src="/src/static/zr/text2.svg" mode="" ></image>
			</view>
		</swiper-item>
	</swiper>
		
			
	
	
	<!-- 心岛精选 -->
	<view class="">
		<view 
			class="text-xl text-black" 
			style="border-left: 2px solid #409eff; padding-left: 15upx; margin-left: 40upx; margin-top: -20upx;"
		>
			心岛精选
		</view>
	</view>
	
	<!-- 卡片精选资料 -->
	<heartcart 
	v-for="(item,index) in Dynamics_data"
		:data="item"
	>
	</heartcart>
	
    
  </view>
</template>

<script lang="ts" setup>
	import { ref,onMounted,type Ref } from 'vue';
	import Dynamics from '@/utils/Dynamics.json'
	import {get_heartisland_detail} from '@/api/heartisland_details'
	import type {Article} from '@/model/Dynamics'
	import http from '@/utils/http';
	import { onLoad } from '@dcloudio/uni-app';
	
	const Dynamics_data:Ref<Article[]> = ref([])
	// 从数据库中调取动态内容的数据
	
	
	onLoad(async ()=>{
		let res =await get_heartisland_detail()
		
		Dynamics_data.value = res.data.results
	})
	
	// 用于存储格式化后的时间
	const formattedTime = ref('');
	// 格式化日期为“YYYY/MM/DD 星期X”的函数
	const formatDate = (date: Date) => {
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0');
	  const day = String(date.getDate()).padStart(2, '0');
	  // 星期数组，根据 getDay() 返回值（0-6，0 代表星期日）获取对应的星期
	  const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	  const week = weeks[date.getDay()];
	  return `${year}/${month}/${day} ${week}`;
	};
	
	onMounted(() => {
	  // 页面挂载时，获取当前时间并格式化
	  const now = new Date();
	  formattedTime.value = formatDate(now);
	});
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
.container{
	 background-image: 
	    linear-gradient(90deg, #f5eff1 0%, #e3e1fd 100%),  /* 横向渐变 */
	    linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.85) 100%);  /* 垂直渐变（透明度变化） */
	  
	  /* 混合模式：让两个渐变融合显示 */
	  background-blend-mode: overlay;
	  
	  height: 220upx; /* 顶部渐变区域高度 */
	  width: 100%;
}
// 心理咨询的板块
.cart{
	height: 400upx;
	width: 95%;
	
	border-radius: 20upx;
	background: linear-gradient(to bottom,
	#7b7dc8 0%,
	#9e9dd1 60%,
	#c2bcde  100%,    
	
	);
	image{
		height: 380upx;
		width: 360upx;
		display: flex;
		margin-bottom: 50px !important; 
	}
	button{
		background: linear-gradient(90deg,
		#a194ce 0%,
		#b793bc 50%,
		#d4919f  100%,    
		
		);
		color: #fff;
		margin-top: 50upx;
	}
	
}

// 心理测评板块

.swiper-item {
  
  border-radius: 16upx;  /* 可选：添加圆角 */
  display: flex;
  align-items: center;
}
.text1{
	height: 200upx;
	background-color: #59473a;
	
	;
	
	image{
		margin-top: 80upx;
		height: 200upx;
		width: 200upx;
		display: flex;
		margin-bottom: 50px !important; 
	}
}
.text2{
	height: 200upx;
	background-color: #41648b;
	
	;
	
	image{
		margin-top: 80upx;
		height: 200upx;
		width: 200upx;
		display: flex;
		margin-bottom: 50px !important; 
	}
}

</style>
